import './jquery.pagination.js'; //引入分页的模块
class List {
    constructor() {}

    init() {
        // alert(1)
        // 封装函数实现渲染
        function render(arrData) {
            let strHtml = '';
            $.each(arrData, function(index, value) {
                strHtml += `
                <li>
                <a href="detail.html?sid=${value.sid}">
                  <img class="lazy"  data-original="${value.url}"/>
                  <p>${value.title}</p>
                  <span>${value.price}</span>
                </a>
              </li>
        `;
            });
            $('.list').html(strHtml); //覆盖渲染
            $('img.lazy').lazyload({ effect: 'slideDown' }); //添加懒加载
        }
        // 1.默认渲染第一页
        $.ajax({
            url: 'http://localhost/lining/backend/list.php',
            dataType: 'json'
        }).then(function(resData) {
            // console.log(resData);
            let arrData = resData.pagecontent;
            render(arrData);


            // 2.添加分页的结构 - 借助组件实现。
            // 点击分页按钮，分页的页码传递给对应的接口地址(get)，获取对应的数据，再次渲染
            $('.page').pagination({
                pageCount: resData.pagesize, //总页数
                jump: true, //是否开启跳转到指定页数，值为boolean类型
                coping: true, //是否开启首页和末页，值为boolean
                homePage: '首页',
                endPage: '末页',
                prevContent: '上页',
                nextContent: '下页',
                callback: function(api) {
                    // console.log(api.getCurrent()); //获取当前点击的分页的页面
                    $.ajax({
                        url: 'http://localhost/lining/backend/list.php',
                        data: {
                            page: api.getCurrent()
                        },
                        dataType: 'json'
                    }).then(function(resData) {
                        let arrData = resData.pagecontent;
                        render(arrData);
                    })
                }
            });

            // 3.准备排序
            // 点击排序按钮，必须回到第一页，从第一页到最后都会排序好。
            $('button').eq(0).on('click', function() {
                $('.page').pagination({
                    pageCount: resData.pagesize, //总页数
                    jump: true, //是否开启跳转到指定页数，值为boolean类型
                    coping: true, //是否开启首页和末页，值为boolean
                    homePage: '首页',
                    endPage: '末页',
                    prevContent: '上页',
                    nextContent: '下页',
                    callback: function(api) {
                        console.log(api.getCurrent()); //获取当前点击的分页的页面
                        $.ajax({
                            url: 'http://localhost/lining/backend/list.php',
                            data: { //后续的每一页都是排序好的
                                page: api.getCurrent(),
                                sort: 'asc'
                            },
                            dataType: 'json'
                        }).then(function(resData) {
                            let arrData = resData.pagecontent;
                            render(arrData);
                        })
                    }
                });

                $.ajax({
                    url: 'http://localhost/lining/backend/list.php',
                    data: {
                        page: 1,
                        sort: 'asc'
                    },
                    dataType: 'json'
                }).then(function(resData) {
                    let arrData = resData.pagecontent;
                    render(arrData);
                })
            })


        });


    }
}


export {
    List
}